<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.88.1">
    <title>巡游轨迹的个人博客</title>
    <link href="../dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
    </style>
    <!-- Custom styles for this template -->
    <link href="../dist/css/navbar.css" rel="stylesheet">

    <link href="../dist/css/upload.css" rel="stylesheet">
    <link href="../dist/css/footers.css" rel="stylesheet">
    <script src="../dist/js/jquery.min.js"></script>
    <link href="../dist/css/footers.css" rel="stylesheet">
    <style>
        body {
            background: url("../images/bc.jpg");
            background-size: cover;
            background-attachment: fixed;
        }

        .mk {
            width: 100%;
            margin: 0px auto;
            border-radius: 10px;
            height: 150px;
        }
    </style>
</head>

<body>
    <main>
        <div>
            <nav class="navbar navbar-expand-lg navbar-light bg-light rounded fixed-top"
                aria-label="Eleventh navbar example">
                <div class="container-fluid">
                    <img src="../images/TouXiang.jpg" alt="" width="35" height="35" class="rounded-circle me-2">
                    <a class="navbar-brand" href="start.html">巡游轨迹的个人博客</a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                        data-bs-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false"
                        aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>

                    <div class="collapse navbar-collapse" id="navbarsExample09">
                        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                            <li class="nav-item">
                                <a class="nav-link active" aria-current="page" href="download.html">旅行攻略</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link active" aria-current="page" href="personal.html">个人简介</a>
                            </li>
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" id="dropdown09" data-bs-toggle="dropdown"
                                    aria-expanded="false" style="color:rgba(0, 163, 228, 0.87) ;">更多</a>
                                <ul class="dropdown-menu" aria-labelledby="dropdown09">
                                    <li><a class="dropdown-item" href="message.html"
                                            style="color:rgba(0, 163, 228, 0.87) ;">留言</a></li>
                                    <li><a class="dropdown-item" href="Updatelog.html">图片上传</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                        <form>
                            <input id="textId" class="form-control" type="text" placeholder="请输入..."
                                aria-label="Search">
                        </form>
                        <div class="text-end">
                            &nbsp;&nbsp;<button id="btn" type="button" class="btn btn-warning">搜索</button>
                            &nbsp;&nbsp;&nbsp;&nbsp;
                        </div>
                    </div>
                </div>
            </nav>
        </div>
    </main>

    <!--高度填充-->
    <div style="height: 80px;"></div>

    <div style="width: 80%;margin: 0 auto;max-width: 700px;">
        <h1 style="text-align:center;color:white;">留言板</h1>
    </div>

    <!--留言发送功能-->
    <div id="message" style="width: 80%;margin: 0 auto;max-width: 700px;">
        <form>
            <p>昵称：</p>
            <input id="title" class="form-control" type="text" placeholder="怎么称呼您..." aria-label="Search" maxlength="8"
                v-model="name"><br />
            <p>描述：</p>
            <input id="brief" class="form-control" type="text" placeholder="您想说些什么..." aria-label="Search"
                maxlength="52" v-model="text" style="height:100px ;"><br />
        </form>
        <div class="text-end">
            <button id="btn1" type="button" class="btn btn-warning" @click="speak">发送</button>&nbsp;&nbsp;&nbsp;&nbsp;
        </div>

        <hr style="color:white ; height: 5px;">

        <!--留言显示功能-->
        <div style="height:40px;"></div>
        <div :key="i" v-for="(item, i) in Message">
            <div class="mk" style="background:url(../images/bc.jpg);">
                <div>
                    <div style="height:18px;float:left;width:95%;"></div>
                    <div style="float:right;color:white;width:5%;" @click="delect(i)">×&nbsp;&nbsp;</div>
                </div>
                <a style="font-size:20px;color:black;line-height:2em;margin:20px;">{{item.name}}</a><br />
                <a style="font-size:16px;color:black;line-height:2em;margin:20px;">{{item.text}}</a><br />
                <div style="height:18px;"></div>
            </div>
            <div style="height:18px;"></div>
        </div>
        <div style="height:35px;"></div>
    </div>
    </div>


    <!--------页脚块-------->
    <div class="b-example-divider" style="height: 30px;"></div>
    <!-------------------分割------------------->
    <div class="container" style="height: 30px;">
        <!-------------------页脚主要------------------->
        <div id="lxfs">
            <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
                <div class="col-md-4 d-flex align-items-center">
                    <a href="personal.html" class="mb-3 me-2 mb-md-0 text-muted text-decoration-none lh-1">
                        <img src="../images/jianjie.jpg" width="24" height="24">
                    </a>
                    <span class="text-muted">&copy; 2022 Company, Inc</span>
                </div>
                <!-------------------弹框样式1------------------->.
                <div background-color="grey">
                    <div class="back" v-if="showModal" @click="showModal=false"></div>
                    <div class="pop" v-if="showModal"
                        style="background:url('../images/footer/wxt.jpg')  no-repeat;background-size: cover;">
                    </div>
                </div>
                <!-------------------弹框样式2------------------->.
                <div background-color="grey1">
                    <div class="back" v-if="showModalqq" @click="showModalqq=false"></div>
                    <div class="pop" v-if="showModalqq"
                        style="background:url('../images/footer/qqt.jpg')  no-repeat;background-size: cover;">
                    </div>
                </div>
                <ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
                    <li class="ms-3"><a class="text-muted" href="javascript:void(0)" v-bind="showModal"
                            @click="wx1(index)"><img src="../images/footer/weixin.png" width="24" height="24"></a>
                    </li>
                    <li class="ms-3"><a class="text-muted" href="javascript:void(0)" v-bind="showModalqq"
                            @click="qq1(index)"><img src="../images/footer/qq.png" width="24" height="24"></a>
                    </li>
                    <li class="ms-3"><a class="text-muted" href="#"><img src="../images/footer/top.png" width="24"
                                height="24"></a></li>
                </ul>
            </footer>
        </div>
    </div>


    <script src="../dist/js/bootstrap.bundle.min.js"></script>
    <script src="../dist/js/vue3.js"></script>
    <script>
        Vue.createApp({
            data() {
                return {
                    name: "",
                    text: "",
                    Message: [
                        {
                            'name': '清风：',
                            'text': '当一个人先从自己内心开始纷纷普，他就是个有价值的人.',
                            'psa': '0'//储存密码，判断能否删除
                        },
                        {
                            'name': '话语者：',
                            'text': '青春似火，超越自我，放飞梦想，创造辉煌.',
                            'pas': '0'//储存密码，判断能否删除
                        },
                        {
                            'name': 'D：',
                            'text': '内容很有质量，博主继续努力.',
                            'pas': '0'//储存密码，判断能否删除
                        },


                    ]
                }
            },
            methods: {
                //发送按钮点击事件
                speak() {
                    if (this.name != "" && this.text != "") {
                        console.log(this.name + "," + this.text);
                        const strs = {
                            'name': this.name + '：',
                            'text': this.text,
                            'pas': 1,
                        };
                        this.Message.push(strs);
                        console.log(strs);
                        console.log(this.Message);
                        //清空输入框
                        this.name = "";
                        this.text = "";
                    }
                },
                //删除按钮
                delect(i) {
                    console.log(i);
                    if (this.Message[i].pas == 1)
                        this.Message.splice(i, 1);
                }
            }
        }).mount('#message')

        Vue.createApp({
            data() {
                return {
                    showModal: false,
                    showModalqq: false,
                }
            },
            methods: {
                //页脚qq弹框判断
                qq1(index) {
                    this.showModalqq = true;
                    this.showModal = false;
                },
                //页脚微信弹框判断
                wx1(index) {
                    this.showModal = true;
                    this.showModalqq = false;
                },
            }
        }).mount('#lxfs')
    </script>
    <script type="text/javascript">
        //右上角百度搜索
        var $eleBtn1 = $("#btn");
        $eleBtn1.click(function () {
            var value = document.getElementById("textId").value;
            console.log(value)
            var $eleForm = $("<form method='get' </form>");
            window.open("https://www.baidu.com/s?wd=" + value);
            $(document.body).append($eleForm);
            $eleForm.submit();
        })
    </script>
</body>

</html>